<template>
  <div class="platform">
    <basic-container>
      <avue-crud
        :option="option"
        :data="data"
        :page.sync="page"
        @on-load="onLoad"
        :search.sync="search"
        @refresh-change="onLoad"
        @search-change="searchChange"
      >
        <template slot="menuLeft" slot-scope="{ size }">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="handleAdd"
            >添加量表
          </el-button>
        </template>

        <template slot-scope="{ type, size, row }" slot="menu">
          <el-button
            icon="el-icon-edit"
            :size="size"
            :type="type"
            @click="goToDetailsList(row)"
            v-if="power"
            >编辑
          </el-button>

          <el-button
            icon="el-icon-delete"
            :size="size"
            :type="type"
            @click="handleRemove(row)"
            v-if="power"
            >删除
          </el-button>

          <el-button
            icon="el-icon-check"
            :size="size"
            :type="type"
            @click="handlePreview(row)"
            >预览
          </el-button>

          <el-switch
            :value="row.status === 1"
            @input="(val) => handleSwitch(row, val)"
            size="small"
            active-text="上下架"
            class="switch"
          ></el-switch>
        </template>
      </avue-crud>
    </basic-container>

    <QuestionPreview
      :gaugeId="gaugeId"
      :visible.sync="questionPreviewVisible"
    ></QuestionPreview>
  </div>
</template>

<script>
import { getList, updateScale, removeScale } from "@/api/scale";
import QuestionPreview from "./settings/question-preview.vue";

export default {
  name: "Platform",
  components: { QuestionPreview },
  data() {
    return {
      user: {},
      search: {},
      promote: true,
      gaugeId: "",
      questionPreviewVisible: false,
      page: {
        pageSize: 20,
      },
      option: {
        addBtnText: "添加量表",
        addBtn: false,
        excelBtn: false,
        delBtn: false,
        editBtn: false,
        border: true,
        index: true,
        expandLevel: 3,
        headerAlign: "left",
        align: "left",
        tree: false,
        labelWidth: 100,
        menuWidth: 480,
        searchMenuSpan: 6,
        column: [
          {
            width: 130,
            label: "编码",
            prop: "gaugeNo",
          },
          {
            label: "量表类别",
            prop: "gaugeTypeName",
            type: "select",
            // formslot: true,
            // searchslot: true,
            search: true,
            props: {
              label: "typeName",
              value: "typeName",
            },
            dicUrl: "/api/blade-measure/measure/gaugetype/listAll?typeName=",
          },
          {
            label: "量表名",
            prop: "title",
            search: true,
          },
          // {
          //   label: "答题时间",
          //   prop: "cost"
          // }
        ],
      },
      data: [],
      query: {},
      power: false,
      role: "",
    };
  },
  created() {
    let role = JSON.parse(localStorage.getItem("saber-userInfo")).content
      .authority;
    role == "任课老师" ? (this.power = false) : (this.power = true);
    this.role = role;
  },
  methods: {
    async onLoad(page = this.page, params = {}) {
      //模拟分页
      // this.page.total = 40;
      const {
        data: { data },
      } = await getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      );
      this.data = data.records;

      this.page.total = data.total;
    },
    goToDetailsList({ gaugeId }) {
      this.$router.push({ name: "量表信息", query: { gaugeId } });
    },
    goToResultSet() {
      this.$router.push({ name: "结果列表" });
    },
    async handleRemove({ gaugeId }) {
      await removeScale(gaugeId);
      this.onLoad();
    },
    handleAdd() {
      this.$router.push({ name: "量表信息" });
    },
    async handleSwitch(row, bool) {
      row.status = bool ? 1 : 0;
      await updateScale(row);
      this.onLoad();
    },
    handlePreview({ gaugeId }) {
      this.gaugeId = gaugeId;
      this.questionPreviewVisible = true;
    },
    async searchChange(params, done) {
      await this.onLoad(this.page, params);
      done();
    },
  },
};
</script>

<style lang="scss">
.platform {
}

.switch {
  margin-left: 12px;
  .el-switch__label * {
    font-size: 12px;
  }
}
</style>
